<template>
  <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="dialogVisible">
    <el-form ref="formRef" class="p-3" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="字典码" prop="dictCode">
        <el-input :disabled="isEdit" v-model="form.dictCode" placeholder="请输入字典码"></el-input>
      </el-form-item>
      <el-form-item label="表名称" prop="tableName">
        <el-input v-model="form.tableName" placeholder="请输入表名称" @mouseleave="gensql" @focus="gensql"></el-input>
      </el-form-item>
      <el-form-item label="释义列" prop="label">
        <el-input v-model="form.label" placeholder="请输入释义列" @mouseleave="gensql" @focus="gensql"></el-input>
      </el-form-item>
      <el-form-item label="值列" prop="value">
        <el-input v-model="form.value" placeholder="请输入值列" @mouseleave="gensql" @focus="gensql"></el-input>
      </el-form-item>
      <el-form-item label="条件" prop="conditions">
        <el-input v-model="form.conditions" placeholder="请输入条件" @mouseleave="gensql" @focus="gensql"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input :rows="2" type="textarea" maxlength="255" v-model="form.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item v-show="haveSql" label="">
        <CodeEditor class="w-100% h-15vh" ref="EditRef"></CodeEditor>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, defineEmits } from "vue";
import { getDictById, updateDict, addDict } from "@/api/modules/dict";
import CodeEditor from "@/components/CodeEditor/index.vue";
import { ElMessage } from "element-plus";
import { format } from "sql-formatter";
const dialogVisible = ref(false);
const formRef = ref(null);
const form = ref({
  dictCode: "",
  tableName: "",
  label: "",
  value: "",
  conditions: "",
  remark: ""
});
const rules = {
  dictCode: [{ required: true, message: "请输入字典码", trigger: "blur" }],
  tableName: [{ required: true, message: "请输入表名称", trigger: "blur" }],
  label: [{ required: true, message: "请输入释义列", trigger: "blur" }],
  value: [{ required: true, message: "请输入值列", trigger: "blur" }]
};
const isEdit = ref(false);
const emit = defineEmits(["cancel", "confirm"]);

const handleCancel = () => {
  emit("cancel");
  dialogVisible.value = false;
};
const EditRef = ref(null);
const haveSql = ref(false);
const gensql = () => {
  haveSql.value = false;
  if (!form.value.tableName || !form.value.label || !form.value.value) {
    return;
  }
  let sql = `
            select
              ${form.value.label} as label,
              ${form.value.value} as value
            from
              ${form.value.tableName}
        `;
  if (form.value.conditions) {
    sql += `where ${form.value.conditions}`;
  }
  sql = format(sql);
  haveSql.value = true;
  EditRef.value.destroyEdit();
  EditRef.value.createEdit(sql, "sql");
};
const handleConfirm = () => {
  formRef.value.validate(valid => {
    if (valid) {
      const apiCall = isEdit.value ? updateDict : addDict;
      apiCall(form.value).then(res => {
        if (res.code === 200) {
          emit("confirm");
          ElMessage.success(isEdit.value ? "编辑成功！" : "添加成功！");
          dialogVisible.value = false;
          formRef.value.resetFields();
        }
      });
    }
  });
};
const openDialog = id => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  dialogVisible.value = true;
  if (id) {
    isEdit.value = true;
    getDictById(id).then(res => {
      form.value = res.data;
      gensql();
    });
  } else {
    isEdit.value = false;
    haveSql.value = false;
    form.value = {
      dictCode: "",
      tableName: "",
      label: "",
      value: "",
      conditions: "",
      remark: ""
    };
  }
  if (EditRef.value) {
    EditRef.value.destroyEdit();
  }
};
defineExpose({
  openDialog
});
</script>
